<template>
  <div id="headBox" class="pageNormalBackground">
    <headerT title="账号安全" />
    <div class="headMarginTop boxMain" style="height:100vh">
      <div class="everyBlockBgcolor pwdBox">
        <!-- <div class="pwdBoxList displayFlex">
                <P class="title">密码</P>
                <input type="password" placeholder="请输入密码" />
        </div>-->
        <div class="pwdBoxList displayFlex phoneList">
          <P class="title">新手机号</P>
          <input type="text" v-model="phone" placeholder="请输入新手机号" />
          <p class="sendCode" v-show="isShow==false" @click="btnSendCode">发送验证码</p>
          <p class="sendCode" v-show="isShow==true">{{second}}秒后重新发送</p>
        </div>
        <div class="pwdBoxList displayFlex">
          <P class="title">验证码</P>
          <input type="text" v-model="code" placeholder="请输入验证码" />
        </div>
      </div>
      <div class="btnsave" @click="btnSave">保存</div>
    </div>
  </div>
</template>

<script>
import headerT from "@/components/header";
import { sendSms, updatePhone } from "@/services/personCenter";
export default {
  components: {
    headerT
  },
  name: "",

  data() {
    return {
      code: "", //验证码
      phone: "", //手机号
      isShow:false,
      second: 60,//60秒
    };
  },
  created() {
    this.code == "";
    this.phone = "";
  },
  watch: {},

  methods: {
    btnSave(){//更换手机号
      const _this = this;
      if (_this.phone == "") {
        this.$vux.toast.text('请输入手机号！', 'top')
        return;
      }
      let myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if(myreg.test(this.phone)==false){
        this.$vux.toast.text('请输入正确的手机号！', 'top')
        return;
      }
      if (_this.code == "") {
        this.$vux.toast.text('请输入验证码！', 'top')
        return;
      }

      this.$post(updatePhone,{phone :this.phone,code:this.code}).then(res=>{
        if(res.code==200){
          this.$vux.toast.text('修改手机号成功！', 'top')
        }
      })
    },
    //发送验证码
    btnSendCode() {
      const _this = this;
      
      if (_this.phone == "") {
        this.$vux.toast.text('请输入手机号！', 'top')
        return;
      }
      let myreg=/^[1][3,4,5,6,7,8,9][0-9]{9}$/;
      if(myreg.test(this.phone)==false){
        this.$vux.toast.text('请输入正确的手机号！', 'top')
        return;
      }

      this.$post(sendSms,{phone:this.phone}).then(res=>{
        if(res.code==200){
          this.$vux.toast.text('发送成功！', 'top')
          this.isShow=true
          _this.second=60
          const time = setInterval(() => {
            _this.second--
              if(_this.second <= 0) {
                _this.show = false
                clearInterval(time)
              }
          }, 1000)
        }
      })
    }
  }
};
</script>

<style lang="less" rel="stylesheet/less" type="text/css" scoped>
@colorRed: #f64135;
@fontsize32: 0.32rem;
#headBox {
  .boxMain {
    .pwdBox {
      box-sizing: border-box;
      // height: 4.83rem;

      padding: 0.2rem 0.34rem;
      .pwdBoxList {
        height: 1.6rem;
        border-bottom: 1px solid #f6f6f6;
        font-size: 0.32rem;
        color: #4e4e4e;
        .title {
          width: 2rem;
        }
        input {
          width: calc(~"100% - 5.2rem");
          margin: 0 0.2rem;
          height: 1rem;
          font-size: 0.4rem;
          color: #4e4e4e;
          border: none;
          background: #ffffff;
          &::-webkit-input-placeholder {
            color: #c8c8c8;
          }
        }

        .sendCode {
          border: 1px solid @colorRed;
          border-radius: 1.4rem;
          font-size: 0.34rem;
          color: @colorRed;
          width: 2.8rem;
          height: 1rem;
          text-align: center;
          line-height: 1rem;
        }
      }
    }

    .btnsave {
      height: 1.13rem;
      background: linear-gradient(
        90deg,
        rgba(246, 65, 53, 1) 0%,
        rgba(255, 205, 88, 1) 100%
      );
      box-shadow: 0rem 0rem 0rem rgba(255, 112, 79, 0.4);
      border-radius: 1rem;
      font-size: 0.39rem;
      color: #ffffff;
      text-align: center;
      line-height: 1.13rem;
      font-weight: bold;
      margin: 1.13rem 0.89rem;
    }
  }
}
</style>
